<template>
  <div :style="{'width':width,'height':height}">
    <video ref="videoPlayer" class="video-js" style="width: 100%;height: 100%" />
  </div>
</template>

<script>
import '@/styles/video-js.min.css'
import videojs from 'video.js'
export default {
  name: 'VideoPlayer',
  props: {
    options: {
      type: Object,
      default() {
        return {}
      }
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '280px'
    }
  },
  data() {
    return {
      player: null
    }
  },
  mounted() {
    this.player = videojs(this.$refs.videoPlayer, this.options, function onPlayerReady() {
      console.log('onPlayerReady', this)
    })
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose()
    }
  }
}
</script>
<!--<style>-->
<!--  @import url(https://unpkg.com/video.js@7/dist/video-js.min.css);-->
<!--</style>-->
